<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Picker 选择器"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <demo-block title="基础用法">
      <hips-picker
        :data="columns"
        :selected-index="defaultIndex1"
        title="选择器标题"
        @confirm="handleConfirm1"
      />
    </demo-block>

    <demo-block title="隐藏顶部栏">
      <hips-picker
        :show-toolbar="false"
        :data="columns1"
        title="选择器标题"
        @change="handleChange1"
      />
    </demo-block>

    <demo-block title="使用 title 插槽">
      <hips-picker
        :data="columns"
        :selected-index="defaultIndex1"
        title="选择器标题"
        @confirm="handleConfirm1"
        @custom-title="onCustomTitle"
      >
        <a
          slot="title"
          style="color: red"
        >clear</a>
      </hips-picker>
    </demo-block>

    <demo-block title="加载状态">
      <hips-picker
        :data="columns2"
        :selected-index="defaultIndex"
        :loading="true"
        title="选择器标题"
      />
    </demo-block>

    <demo-block title="多列">
      <hips-picker
        :data="columns3"
        :selected-index="defaultIndex3"
        title="选择器标题"
        value-key="name"
        @confirm="handleConfirm2"
      />
    </demo-block>

    <demo-block title="多列级联">
      <hips-picker
        ref="hipsPicker"
        :data="columns4"
        :selected-index="defaultIndex4"
        title="选择器标题"
        @confirm="handleConfirm2"
      />

      <br>
      <hips-row>
        <hips-col span="12">
          <hips-button
            type="warning"
            @click="setData"
          >
            Set Picker Data
          </hips-button>
        </hips-col>
        <hips-col
          span="12"
        >
          <hips-button
            type="primary"
            @click="resetData"
          >
            Rest Picker Data
          </hips-button>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="结合popup使用">
      <hips-button
        block
        type="primary"
        @click="show = true"
      >
        Click Me Show Picker
      </hips-button>

      <hips-popup
        v-model="show"
        position="bottom"
      >
        <hips-picker
          :data="columns4"
          :selected-index="defaultIndex4"
          title="选择器标题"
          @confirm="handleConfirm2"
          @cancel="handleCancel2"
          @custom-title="onCustomTitle"
        >
          <a
            slot="title"
            style="color: red"
          >clear</a>
        </hips-picker>
      </hips-popup>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Picker, Row, Col, Button, Popup } from '@hips/vue-ui';

const columns4 = [
  {
    value: 'a',
    code: 'A',
    children: [
      {
        value: 'a-1',
        code: 'A-1',
        children: [{ value: 'a-1-1', code: 'A-1-1', children: [] }],
      },
      {
        value: 'a-2',
        code: 'A-2',
        children: [{ value: 'a-2-2', code: 'A-2-2', children: [] }],
      },
    ],
  },
  {
    value: 'b',
    code: 'B',
    children: [
      {
        value: 'b-1',
        code: 'B-1',
        children: [{ value: 'b-1-1', code: 'B-1-1' }],
      },
      {
        value: 'b-2',
        code: 'B-2',
        children: [{ value: 'b-2-2', code: 'B-2-2' }],
      },
    ],
  },
];

export default {
  components: {
    [Picker.name]: Picker,
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button,
    [Popup.name]: Popup,
  },
  mixins: [ BasicView ],
  data() {
    return {
      show: false,
      columns: [
1, 2, 3, 4, 5, 6, 7,
],
      columns1: [
[
'A', 'B', 'C', 'D', 'E', 'F', 'J',
],
],
      columns2: [[{ value: 'a', code: 'a-1' }]],
      columns3: [
        [
          { name: 'a', code: 'a1' },
          { name: 'b', code: 'b1' },
          { name: 'c', code: 'c1' },
          { name: 'd', code: 'd1' },
          { name: 'e', code: 'e1' },
        ],
        [
          { name: 'A', code: 'A' },
          { name: 'B' },
          { name: 'C' },
          { name: 'D', code: 'D' },
          { name: 'E', code: 'E' },
        ],
      ],
      columns4,
      defaultIndex: [ 0 ],
      defaultIndex1: [ 3 ],
      defaultIndex3: [ 1 ],
      defaultIndex4: [
1, 1, 0,
],
    };
  },

  methods: {
    onCustomTitle() {
      this.show = false;
      this.$hips.toast(`click title area`);
    },
    handleChange1(index) {
      this.$hips.toast(`索引: ${index}, 当前值: ${this.columns[index]}`);
    },

    handleConfirm1(values) {
      this.$hips.toast(
        `索引: ${values[0].index}, 当前值: ${values[0].value.value}`,
      );
    },

    handleConfirm2(values) {
      this.$hips.dialog.alert({
        title: this.$t('selectValues'),
        content: window.JSON.stringify(values),
        okText: this.$t('confirm'),
      });

      setTimeout(() => {
        this.show = false;
      });
    },

    handleCancel2() {
      this.show = false;
    },

    setData() {
      const newData = this.columns4.map((item) => {
        item.value = item.value.toUpperCase();
        return item;
      });

      newData.push({
        value: 'C',
        code: 'C',
        children: [
          {
            value: 'c-1',
            code: 'C-1',
            children: [{ value: 'c-1-1', code: 'C-1-1' }],
          },
        ],
      });

      this.$refs.hipsPicker.setPickerData(newData, [
0, 0, 0,
]);
    },

    resetData() {
      const newData = this.columns4.map((item) => {
        item.value = item.value.toLowerCase();
        return item;
      });
      this.$refs.hipsPicker.setPickerData(newData, this.defaultIndex4);
    },
  },
};
</script>

<style scoped lang="stylus"></style>
